<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-button class="active" type="text" @click="handleAdd" v-hasPermi="['labdanger:details:edit']">新增申领试剂</el-button>
    <el-dialog :visible.sync="open" :title="title" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="190px" :rules="rules" style="margin-top: -20px">
        <el-form-item label="申购老师" label-width="100px">
            <span>{{applyTeacherName}}</span>
        </el-form-item>
        <el-form-item label="名称" label-width="100px">
            <!-- <el-input v-model="form.casNo" @blur="searchApplyPurchaseDetails"
            @keyup.enter.native="searchApplyPurchaseDetails" placeholder="请输入CAS编号"/> -->
            <el-select v-model="form.purchaseDetailId" @change="searchApplyPurchaseDetails" placeholder="请选择试剂名称/采购明细ID" style="width:100%" >
              <el-option v-for="(item, index) in purchaseDetails" :key="item.purchaseDetailId" :label="item.materialName+' / '+item.purchaseDetailId" :value="item.purchaseDetailId">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="Cas号" prop="casNo" label-width="100px">
            <el-input v-model="form.casNo"  disabled/>
        </el-form-item>
        <el-form-item label="类别" prop="hazardousOpt" label-width="100px">
          <el-select v-model="form.hazardousOpt" placeholder="自动带入" style="width:100%" disabled>
            <el-option v-for="item in kindsOptions" :key="item.kindsId" :label="item.name" :value="item.kindsId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="model" label-width="100px">
          <el-input v-model="form.model" placeholder="请输入规格" disabled/>
        </el-form-item>
        <el-form-item label="单位" prop="unitOpt" label-width="100px">
          <el-select v-model="form.unitOpt" placeholder="请选择单位" style="width:100%" disabled>
            <el-option v-for="dict in unitOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量" prop="inventoryQuantity" label-width="100px">
            <el-input v-model="form.inventoryQuantity" placeholder="请输入库存数量" disabled/>
        </el-form-item>
        <el-form-item label="领用数量" prop="occupationQuantity" label-width="100px"
        :rules="[
          {required: true, message: '请输入领用数量', trigger: 'blur'},
          {type: 'number', message: '请输入数字', trigger: 'blur'}
        ]">
            <el-input v-model.number="form.occupationQuantity" type="number" placeholder="请输入领用数量"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-hasPermi="['labdanger:details:edit']">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDetails, updateDetails } from "@/api/labdanger/occupationDetail";
import { listByinstance } from "@/api/labdanger/purchaseDet";
export default {
  name: "AddAgentia",
  data() {
    return {
      title:'',
      open: false,
      // 表单参数
      form: {},
      purchaseDetails: [],
      rules: {
         casNo: {required: true, message: '请选择CAS编号', trigger: 'blur'},
         materialName: {required: true, message: '请输入试剂名称', trigger: 'blur'}
      }
    };
  },
  props: {
    instanceId: Number,
    applyTeacherNo: String,
    applyTeacherName: String,
    kindsOptions: Array,
    unitOptOptions: Array
  },
  created() {
  },
  updated() {
  },
  methods: {
    searchApplyPurchaseDetails(val) {
      if (this.form.purchaseDetailId) {
        for(var i=0;i<this.purchaseDetails.length;i++){
          if(this.form.purchaseDetailId==this.purchaseDetails[i].purchaseDetailId){
            let item = this.purchaseDetails[i];
            this.form.casNo = item.casNo;
           // this.form.materialName = item.materialName;
            this.form.hazardousOpt = item.hazardousOpt;
            this.form.model = item.model;
            this.form.unitOpt =item.unitOpt;
            this.form.inventoryQuantity = item.inventoryNum;
             return;
          }
        }
       //this.form = detailsList[0]
       //this.form.inventoryQuantity = this.form.inventoryNum
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.instanceId = this.instanceId
      this.form.applyTeacher = this.applyTeacherNo
      this.title='新建申领试剂';
      this.open = true;
      this.listPurchaseDetails(this.applyTeacherNo)
    },
    updateDetail(item){
      this.reset();
      this.form = item;
      this.title='编辑申领试剂';
      this.open = true;
      this.listPurchaseDetails(this.applyTeacherNo)
    },
    listPurchaseDetails(applyTeacherNo) {
      var queryParams = {
          applyTeacher: applyTeacherNo,
          purchaseStatus: 2,
          inventoryNum: 0,
        }
      listByinstance(queryParams).then(response => {
        var detailsList = response.data;
        this.purchaseDetails = detailsList;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
      };
      // this.resetForm("form");
      this.open = false
    },
    submitForm(e) {
      if (this.form.occupationQuantity > this.form.inventoryQuantity) {
        this.msgError("领用数量不能大于库存数量");
        return
      }
      this.$refs['form'].validate((valid)=> {
        if (valid) {
          if (this.form.occupationDetailsId) {
            updateDetails(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.$emit("list");
            });
          } else {
            this.form.instanceId = this.instanceId
            addDetails(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.$emit("list");
            });
          }
        }
      })
    }
  }
};
</script>

<style scoped>
    .el-button.active{
    text-decoration: underline;
    color: #0000ee;
    margin-left: 15px;
  }
  .dialog-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
</style>
